<template>
  <view class="lottery-container">
    <!-- 开场动画 -->
    <!-- <view
      class="animation-summon open"
      :class="sequential.opening ? 'show' : 'hide'"
      v-if="show"
    >
    </view> -->

    <!-- 黄色背景 -->
    <view
      class="blue-bg ye"
      :hidden="!(sequential.appearances && !sequential.show)"
    >
      <image
        class="blue-bg-img"
        :src="
          $IMG_URL + '/uploads/20230510/09300bbc0c2b25c08536e1dda5b6d286.png'
        "
        binderror=""
      />
    </view>
    <!-- 射灯 -->
    <view class="blue-bg" @tap="close" :hidden="!sequential.show">
      <view>
        <light></light>
      </view>
    </view>
    <!-- 老虎机出场  -->
    <view class="appearances-show" v-if="sequential.appearances && show">
      <!-- 老虎机背景 -->
      <image
        :class="sequential.show ? 'hide' : ''"
        class="bot-group"
        :src="
          $IMG_URL + '/uploads/20230427/4a8e7606413e91be2cedad52d1658b39.png'
        "
      />
      <!-- 扳机 -->
      <!-- <view class="open-bot" :class="sequential.show ? 'hide' : ''"> </view> -->
      <image
        class="trigger"
        :src="
          $IMG_URL + '/uploads/20230510/900ed33c9090e2de6b250dd97f49979e.png'
        "
        :class="sequential.show ? 'hide' : ''"
        mode="widthFix"
      />

      <!-- 转动 奖品 -->
      <view
        class="move-swiper"
        :class="[sequential.magnify ? 'scale' : '']"
        v-if="list.length > 0"
        @tap.stop="close"
      >
        <!-- 奖品栏 -->
        <lottery-swiper-item
          v-for="(item, index) in list"
          :key="index"
          :fake-list="fake"
          :details="item"
          :number="index + 1"
          :is-skip="skip"
          :class="[
            sequential.magnify ? 'move' : '',
            sequential.show ? showType[list.length] || '' : '',
          ]"
          :magnify="sequential.show"
          class="card-swiper-bot"
        ></lottery-swiper-item>
        <!-- 锁头 -->
        <view
          class="lock card-swiper-bot"
          :class="sequential.show ? 'hide' : ''"
          v-for="(lock, key0) in 6 - list.length"
          :key="key0"
        >
          <image
            class="lock-img"
            :src="
              $IMG_URL +
              '/uploads/20230427/33b78e0f0c2153cfaf2033ac17db6656.png'
            "
          />
        </view>
      </view>
    </view>
    <view class="bottom-btn">
      <view
        class="again-btn"
        hover-class="hover-bubble"
        @tap.stop="onClickOperate($event, 'close', {})"
        v-if="sequential.agian"
      >
        <image class="bg-again" :src="again_img" mode="widthFix" />
        <view class="text"> 开心收下 </view>
      </view>
      <!-- <view
          class="again-btn"
          hover-class="hover-bubble"
          @tap="onClickOperate($event, 'again', {})"
          ><image class="bg-again" :src="again_img" mode="widthFix" />
          <view class="text"> 继续欧气 </view>
        </view> -->
      <view
        class="skip-btn"
        hover-class="hover-bubble"
        @tap.stop="clickSkip"
        v-if="!skip"
      >
        <u-icon size="25" class="icon-skip" name="skip-forward-right"></u-icon>
        跳过动画
      </view>
    </view>
  </view>
</template>
<script>
/**
 * 福袋抽取动画
 * 开场动画 星星-> 黄色背景 老虎机出现 -> 转动 -> 展示奖品
 *  @property {Array} fakeList 福袋页展品列表的首个
 *  @property {Boolean} show 是否显示抽奖动画
 *  @property {Array} resultList 抽到的奖品列表
 *  @method close 关闭动画展示
 *  @method again 继续抽取
 */

// 图片
import again_img from '../img/all-1.png';
//////
//工具
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
////
// 滚动奖品组件
import LotterySwiperItem from './lottery-swiper-item.vue';
// 射灯组件
import Light from '../components/light.vue';

import { mapGetters } from 'vuex';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: { LotterySwiperItem, Light },
  props: {
    fakeList: {
      type: Array,
      default: () => [],
    },
    show: {
      type: Boolean,
      default: false,
    },
    resultList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // blue_bg,
      again_img,
      // timestamp: '?',
      // 抽取 奖品类型
      showType: {
        1: 'single',
        3: 'three',
        5: 'normal',
      },
      /**
       *  动画出场效果
       *  1.星星展示 持续 3秒 + N发 * 1秒
       *  2.老虎机出场 0.6秒后出场
       *  3.老虎机转动 1.5秒后转动 0.5s触发 持续 N发 * 1秒
       *  4.展示 2.8秒 + N发 * 1秒后 展示
       *  5.放大 3秒 + N发 * 1秒
       *  6.黄色背景 3秒 + N发 * 1秒
       *  7.继续欧气 3.5秒 + N发 * 1秒
       */
      //播放顺序
      sequential: {
        // 开幕
        // opening: false,
        // 出场
        appearances: false,
        // 转动
        // turn: false,
        // 展示
        show: false,
        // 放大
        magnify: false,
        // 黄色背景
        yellow: false,
        // 继续欧气
        agian: false,
      },
      timer: {
        // 开幕
        // opening: null,
        // 出场
        appearances: null,
        // 转动
        // turn: null,
        // 展示
        show: null,
        // 放大
        magnify: null,
        // 黄色背景
        yellow: null,
        // 继续欧气
        agian: null,
      },
      // 是否跳过动画
      isSkip: false,
      // 开场动画 图片信息
      // open_IMG: {
      //   status: false,
      //   url: '',
      //   cdn:
      //     this.$IMG_URL +
      //     '/uploads/20230505/4eb3710dcb511b38ac1dee0fe360aedf.png',
      // },
      timer_show: null,
    };
  },
  // 计算属性 适配者模式
  computed: {
    ...mapGetters(['allSkip']),
    skip() {
      return this.allSkip || this.isSkip || false;
    },
    fake() {
      let arr = this.fakeList || [];
      return (
        arr.map((item) => {
          return item.goods_list[0];
        }) || []
      );
    },
    list() {
      return this.resultList || []; //this.resultList;
    },
    number() {
      return this.resultList.length; // this.resultList.length;
    },
  },
  // 数据监听
  watch: {
    show(val) {
      if (val) {
        this.hideing();
        uni.showLoading({
          title: '正在加载',
          mask: true,
        });
        this.timer_show = setTimeout(() => {
          clearTimeout(this.timer_show);
          uni.hideLoading();
          this.onSkip({
            success: () => {
              this.play();
            },
            fail: () => {},
          });
        }, 200);
      } else {
        this.hideing();
      }
    },
  },
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {
    // this.timestamp = `?${Math.random() * 100}`;
    // this.loadingImg();
  },
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    // 点击 跳过
    clickSkip() {
      this.isSkip = true;
      this.hideing();
      this.onSkip();
    },
    // 跳过
    onSkip(ev = {}) {
      let { success = () => {}, fail = () => {} } = ev;
      if (this.skip) {
        this.sequential.show = true;
        this.sequential.magnify = true;
        this.sequential.appearances = true;
        this.sequential.agian = true;
        fail();
      } else {
        success();
      }
    },

    hideing() {
      //播放顺序
      this.sequential = {
        // 开幕
        // opening: false,
        // 出场
        appearances: false,
        // 转动
        // turn: false,
        // 展示
        show: false,
        // 放大
        magnify: false,
        // 黄色背景
        yellow: false,
        // 继续欧气
        agian: false,
      };
      Object.keys(this.timer).forEach((item) => {
        const ele = this.timer[item];
        if (ele) {
          clearTimeout(ele);
        }
      });
    },
    /**
     *  页面点击事件 防抖
     * @param {Object} ev  $event
     * @param {String} name 执行名称
     * @param {Object} data 传值
     */
    onClickOperate(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          case 'again':
            this.$emit('again', { name, type: true });
            break;
          case 'close':
            this.close();
            break;
        }
      });
    },
    close() {
      this.isSkip = false;
      if (!this.sequential.agian) return;
      this.$emit('close', { name: 'close', type: true });
    },

    // 播放事件
    sequentialEvent() {
      let single = 1000;
      const events = {
        //开场
        // opening: (fn = () => {}, delay = 1250) => {
        //   // 开始
        //   this.sequential.opening = true;
        //   this.timer.opening = setTimeout(() => {
        //     clearTimeout(this.timer.opening);
        //     fn();
        //     //结束
        //     this.sequential.opening = false;
        //   }, delay);
        // },
        //出场
        appearances: (fn = () => {}, delay = 10) => {
          this.timer.appearances = setTimeout(() => {
            clearTimeout(this.timer.appearances);
            fn();
            // 开始
            this.sequential.appearances = true;
          }, delay);
        },
        // 展示
        show: (fn = () => {}, delay = 2200 + this.number * single) => {
          this.timer.show = setTimeout(() => {
            clearTimeout(this.timer.show);
            fn();
            //开始
            this.sequential.show = true;
          }, delay);
        },
        // 放大
        magnify: (fn = () => {}, delay = 3500 + this.number * single) => {
          this.timer.magnify = setTimeout(() => {
            clearTimeout(this.timer.magnify);
            fn();
            //开始
            this.sequential.magnify = true;
          }, delay);
        },
        // 继续欧气
        agian: (fn = () => {}, delay = 3500 + this.number * single) => {
          this.timer.agian = setTimeout(() => {
            clearTimeout(this.timer.agian);
            fn();
            //开始
            this.sequential.agian = true;
            this.isSkip = true;
          }, delay);
        },
      };

      return events;
    },

    // 开始播放
    play() {
      const events = this.sequentialEvent();
      Object.keys(this.sequential).forEach((item) => {
        const ele = this.sequential[item];
        if (events[item]) {
          events[item](() => {});
        }
      });
    },
    //加载图片
    loadingImg() {},
  },
};
</script>
<style lang="scss" scoped>
view,
image {
  max-width: none;
}

.lottery-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300000;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.6);

  .animation-summon.open.hide {
    animation: fade-hide 0.6s ease-out 0s 1 normal forwards;
  }
  .animation-summon.open.show {
    animation: fade-show 0.1s ease-in 0s 1 normal forwards;
  }
  .animation-summon.open {
    opacity: 0.3;
  }
  .animation-summon {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .blue-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    &.ye {
      perspective: 5em;
    }
    .blue-bg-img {
      position: absolute;
      top: calc(50% - 60vh);
      left: calc(50% - 60vh);
      width: 120vh;
      height: 120vh;
      transform-style: preserve-3d;
      animation: rotate-in-center 10s linear 0s infinite none,
        fade 1s linear 0s 1 none;
    }
  }

  .appearances-show {
    position: absolute;
    top: calc(50% - 320rpx);
    left: calc(50% - 326rpx);
    z-index: 10;
    width: 652rpx;
    height: 722rpx;
    // border: 1rpx solid #fff;
    animation: scale-in-center-1 0.8s linear 0s 1 normal none;

    @keyframes scale-in-center-1 {
      0% {
        transform: scale(0);
        opacity: 0;
      }
      80% {
        transform: scale(1.2);
        opacity: 1;
      }
      100% {
        transform: scale(1);
        opacity: 0.8;
      }
    }

    .move-swiper {
      display: flex;
      align-content: center;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      position: relative;
      padding: 46rpx 66rpx 186rpx 58rpx;
      width: 100%;
      height: 100%;
      transition: all 0.6s;
      &.scale {
        transform: scale(1.62);
      }

      .card-swiper-bot:nth-child(3n) {
        margin-right: 0;
      }

      .card-swiper-bot:nth-child(1),
      .card-swiper-bot:nth-child(3),
      .card-swiper-bot:nth-child(2) {
        margin-bottom: 40rpx;
      }
      .card-swiper-bot:nth-child(4) {
        &.move {
          transform: translateX(46%);
        }
      }
      .card-swiper-bot:nth-child(5) {
        &.move {
          transform: translateX(50%);
        }
      }

      .card-swiper-bot.lock {
        // position: absolute;
        // bottom: 146rpx;
        // right: 50rpx;
        width: 160rpx;
        height: 222rpx;
        .lock-img {
          width: 100%;
          height: 100%;
        }
        animation: fade 1s linear 0s 1 normal forwards;
      }
      .card-swiper-bot {
        margin-right: 22rpx;
        transition: all 0.6s;
        // border: 1rpx solid #000;
        &.hide {
          animation: fade-10 0.3s linear 0s 1 normal forwards;
        }
        &.single {
          transform: translate(115%, 80%);
        }
        &.three {
          transform: translate(0, 80%);
          margin-right: 0rpx;
        }
        &.normal {
          margin-right: 0rpx;
        }
      }
    }

    .bot-group {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      &.hide {
        animation: fade 0.2s linear 0s 1 reverse forwards;
      }
    }

    .open-bot {
      position: absolute;
      top: 4%;
      right: -50rpx;
      width: 160rpx;
      height: 557rpx;
      // overflow: hidden;
      background-image: url($IMG_URL + '/uploads/20230427/53dd447e3afcc2bb250d0c53fd887bd6.png');
      animation: myAnimation-1 0.3s steps(1) 1.4s 1;
      transform-origin: 100% 0%;
      transform: scale(0.6);
      &.hide {
        animation: fade 0.2s linear 0s 1 reverse forwards;
      }
    }
    @keyframes myAnimation-1 {
      0% {
        background-position: 0 0;
      }
      12.50% {
        background-position: -160rpx 0px;
      }
      25.00% {
        background-position: -320rpx 0px;
      }
      37.50% {
        background-position: -480rpx 0px;
      }
      50.00% {
        background-position: -640rpx 0px;
      }
      62.50% {
        background-position: -800rpx 0px;
      }
      75.00% {
        background-position: -960rpx 0px;
      }
      87.50% {
        background-position: -1120rpx 0px;
      }
      100.00% {
        background-position: -1280rpx 0px;
      }
    }
  }

  .again-btn {
    position: relative;
    width: 188rpx;
    height: 88rpx;

    .bg-again {
      position: absolute;
      top: -3rpx;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .text {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      font-size: 32rpx;
      font-weight: 800;
      color: #ffffff;
    }
  }
  .bottom-btn {
    position: absolute;
    left: 0;
    bottom: 60rpx;
    z-index: 10;
    padding: 0 60rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .skip-btn {
      position: absolute;
      right: 30rpx;
      top: 50%;
      padding: 2rpx;
      line-height: 28rpx;
      transform: translateY(-50%);
      color: #fff;
      font-size: 28rpx;
      border-bottom: 2rpx solid #fff;
      .icon-skip {
        margin-right: 2rpx;
      }
    }
  }
  .streamers-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: fade 1.2s linear 0s 1 normal none;
    .streamers-img {
      position: absolute;
      left: calc(50% - 375px);
      top: calc(50% - 667px);
      width: 750px;
      height: 1334px;
      animation: myAnimation 8s steps(1) 1;
    }
  }
}

.trigger {
  position: absolute;
  top: 4%;
  right: -38rpx;
  width: 70rpx;
  height: 238rpx;
  transform-origin: 50% 100%;
  // animation: trigger-route-skew 0.3s ease-in-out 1.4s 2 alternate none;
  animation: trigger-route-skew 0.16s ease-in-out 1.4s 2 alternate none;
  &.hide {
    animation: fade 0.2s linear 0s 1 reverse forwards;
  }
}

@keyframes move-light {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes fade-show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-hide {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-10 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rotate-in-center {
  0% {
    transform: scaleZ(0.6) rotate(0);
  }
  100% {
    transform: scaleZ(0.6) rotate(360deg);
  }
}
@keyframes trigger-route-skew {
  0% {
    filter: blur(0);
    transform: rotateX(0) skewX(0deg);
  }
  66% {
    filter: blur(10px) drop-shadow(0 -10rpx 10rpx rgba(253, 109, 109, 0.8));
    transform: rotateX(120deg) skewY(20deg) skewX(-5deg) scaleY(0.5);
  }
  100% {
    transform: rotateX(180deg) skewY(30deg) skewX(-10deg);
    filter: blur(0px);
  }
}
</style>
